<template>
  <Wrapper>
    <el-card shadow="never">
      <cropper
        ref="cropperRef"
        src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
        :compress="formData.compress"
        :aspectRatio="formData.aspectRatio"
        :circle="formData.circle"
      />
      <el-space
        :size="16"
        wrap
        style="margin-top: 24px"
      >
        <el-tooltip content="圆形、矩形裁剪">
          <icon
            :type="ICON_TYPE.SVG"
            name="circle-rect"
            @click="formData.circle = !formData.circle"
          />
        </el-tooltip>
        <el-tooltip content="顺时针旋转45度">
          <icon
            name="RefreshRight"
            @click="handleCrop('rotate', 45)"
          />
        </el-tooltip>
        <el-tooltip content="逆时针旋转45度">
          <icon
            name="RefreshLeft"
            @click="handleCrop('rotate', -45)"
          />
        </el-tooltip>
        <el-tooltip content="水平翻转">
          <icon
            :type="ICON_TYPE.SVG"
            name="vertical"
            @click="handleCrop('scaleX', -1)"
          />
        </el-tooltip>
        <el-tooltip content="垂直翻转">
          <icon
            :type="ICON_TYPE.SVG"
            name="horizontal"
            @click="handleCrop('scaleY', -1)"
          />
        </el-tooltip>
        <el-tooltip content="放大">
          <icon
            name="ZoomOut"
            @click="handleCrop('zoom', 0.1)"
          />
        </el-tooltip>
        <el-tooltip content="缩小">
          <icon
            name="ZoomIn"
            @click="handleCrop('zoom', -0.1)"
          />
        </el-tooltip>
        <el-tooltip content="重置">
          <icon
            name="Refresh"
            @click="handleCrop('reset')"
          />
        </el-tooltip>
      </el-space>
      <el-divider />
      <h3>配置参数</h3>
      <el-form
        :model="formData"
        v-bind="formConfig"
      >
        <el-form-item label="aspectRatio">
          <template #label>
            <el-tooltip content="固定选区或者不固定">
              aspectRatio
            </el-tooltip>
          </template>
          <el-radio-group v-model="formData.aspectRatio">
            <el-radio-button
              label="自由"
              :value="0"
            ></el-radio-button>
            <el-radio-button
              label="1:1"
              :value="1 / 1"
            ></el-radio-button>
            <el-radio-button
              label="4:3"
              :value="4 / 3"
            ></el-radio-button>
            <el-radio-button
              label="16:9"
              :value="16 / 9"
            ></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="compress">
          <template #label>
            <el-tooltip content="图像压缩率，可选值为：0.1-1">
              compress
            </el-tooltip>
          </template>
          <el-radio-group v-model="formData.compress">
            <el-radio-button
              label="0.1"
              :value="0.1"
            ></el-radio-button>
            <el-radio-button
              label="0.5"
              :value="0.5"
            ></el-radio-button>
            <el-radio-button
              label="1"
              :value="1"
            ></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="circle">
          <el-switch v-model="formData.circle" />
        </el-form-item>
      </el-form>
      <el-divider />
      <el-card
        shadow="never"
        header="裁剪结果"
      >
        <img :src="imgData" />
      </el-card>
      <el-space
        :size="26"
        wrap
        style="margin-top: var(--el-card-padding)"
      >
        <el-button
          type="primary"
          @click="getBase64"
        >Base64</el-button>
        <el-button
          type="primary"
          @click="getBlob"
        >Blob</el-button>
        <el-button
          type="primary"
          @click="getFile"
        >File</el-button>
      </el-space>
    </el-card>
  </Wrapper>
</template>

<script setup>
import { ICON_TYPE } from '@/const'
import useForm from '@/hooks/useForm'
import cropper from '@/components/cropper'

const { formData, formConfig } = useForm({
  compress: 1,
  aspectRatio: 0,
  circle: false,
}, { labelWidth: '120' })

const cropperRef = ref(null)
const imgData = ref('')

function handleCrop(type, value) {
  cropperRef.value.cropperRef[type](value)
}

async function getBase64() {
  cropperRef.value.getCropData((data) => {
    imgData.value = data
  })
}

function getBlob() {
  cropperRef.value.getCropBlob((blob) => {
    imgData.value = URL.createObjectURL(blob)
  })
}

function getFile() {
  cropperRef.value.getCropFile(
    (file) => {
      const tag = document.createElement('a')
      tag.download = file.name
      tag.href = URL.createObjectURL(file)
      tag.click()
    },
    'fileName.jpg',
    'image/jpeg',
  )
}
</script>

<style scoped lang="scss">
h3 {
  margin-bottom: $space-medium-x;
}
</style>
